<template>
  <div class="date-picker">
    <div class="input-wrapper" @click="toggleCalendar">
      <input type="text" v-model="formattedDate" readonly />
      <span class="calendar-icon">📅</span>
    </div>
    <div v-if="showCalendar" class="calendar-container">
      <div class="calendar-header">
        <button @click="prevMonth">«</button>
        <span>{{ monthNames[currentMonth] }} {{ currentYear }}</span>
        <span>{{ monthNames[nextMonthIndex] }} {{ nextYearValue }}</span>
        <button @click="nextMonth">»</button>
      </div>
      <div class="calendar-body">
        <div class="calendar">
          <div class="week-days">
            <span v-for="day in weekDays" :key="day">{{ day }}</span>
          </div>
          <div class="days">
            <span v-for="blank in blanks" :key="'b' + blank"></span>
            <span
              v-for="(day, index) in daysInMonth"
              :key="index"
              :class="{ selected: isSelected(day), today: isToday(day) }"
              @click="selectDate(day)"
            >
              {{ day }}
            </span>
          </div>
        </div>
        <div class="calendar">
          <div class="week-days">
            <span v-for="day in weekDays" :key="day">{{ day }}</span>
          </div>
          <div class="days">
            <span v-for="blank in nextBlanks" :key="'b' + blank"></span>
            <span
              v-for="(day, index) in nextDaysInMonth"
              :key="index"
              :class="{
                selected: isSelectedNext(day),
                today: isTodayNext(day)
              }"
              @click="selectDateNext(day)"
            >
              {{ day }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from 'vue'

const showCalendar = ref(false)
const selectedDate = ref(null)
const currentMonth = ref(new Date().getMonth())
const currentYear = ref(new Date().getFullYear())
const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
const monthNames = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December'
]

const daysInMonth = computed(() => {
  const date = new Date(currentYear.value, currentMonth.value + 1, 0)
  return Array.from({ length: date.getDate() }, (_, i) => i + 1)
})

const blanks = computed(() => {
  const firstDay = new Date(currentYear.value, currentMonth.value, 1).getDay()
  return Array.from({ length: firstDay })
})

const formattedDate = computed(() => {
  if (!selectedDate.value) return ''
  const day = String(selectedDate.value.getDate()).padStart(2, '0')
  const month = String(selectedDate.value.getMonth() + 1).padStart(2, '0')
  const year = selectedDate.value.getFullYear()
  return `${month}/${day}/${year}`
})

const toggleCalendar = () => {
  showCalendar.value = !showCalendar.value
}

const selectDate = (day) => {
  selectedDate.value = new Date(currentYear.value, currentMonth.value, day)
  showCalendar.value = false
}

const isSelected = (day) => {
  if (!selectedDate.value) return false
  return (
    selectedDate.value.getDate() === day &&
    selectedDate.value.getMonth() === currentMonth.value &&
    selectedDate.value.getFullYear() === currentYear.value
  )
}

const isToday = (day) => {
  const today = new Date()
  return (
    today.getDate() === day &&
    today.getMonth() === currentMonth.value &&
    today.getFullYear() === currentYear.value
  )
}

const prevMonth = () => {
  if (currentMonth.value === 0) {
    currentMonth.value = 11
    currentYear.value--
  } else {
    currentMonth.value--
  }
}

const nextMonth = () => {
  if (currentMonth.value === 11) {
    currentMonth.value = 0
    currentYear.value++
  } else {
    currentMonth.value++
  }
}

// Next month calculations
const nextMonthIndex = computed(() => {
  return currentMonth.value === 11 ? 0 : currentMonth.value + 1
})

const nextYearValue = computed(() => {
  return currentMonth.value === 11 ? currentYear.value + 1 : currentYear.value
})

const nextDaysInMonth = computed(() => {
  const date = new Date(nextYearValue.value, nextMonthIndex.value + 1, 0)
  return Array.from({ length: date.getDate() }, (_, i) => i + 1)
})

const nextBlanks = computed(() => {
  const firstDay = new Date(
    nextYearValue.value,
    nextMonthIndex.value,
    1
  ).getDay()
  return Array.from({ length: firstDay })
})

const selectDateNext = (day) => {
  selectedDate.value = new Date(nextYearValue.value, nextMonthIndex.value, day)
  showCalendar.value = false
}

const isSelectedNext = (day) => {
  if (!selectedDate.value) return false
  return (
    selectedDate.value.getDate() === day &&
    selectedDate.value.getMonth() === nextMonthIndex.value &&
    selectedDate.value.getFullYear() === nextYearValue.value
  )
}

const isTodayNext = (day) => {
  const today = new Date()
  return (
    today.getDate() === day &&
    today.getMonth() === nextMonthIndex.value &&
    today.getFullYear() === nextYearValue.value
  )
}
</script>
<style scoped>
.date-picker {
  position: relative;
  display: inline-block;
  font-family: Arial, sans-serif;
}

.input-wrapper {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  cursor: pointer;
}

.input-wrapper input {
  border: none;
  outline: none;
  cursor: pointer;
  width: 100%;
}

.input-wrapper .calendar-icon {
  margin-left: 5px;
}

.calendar-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #f7f7f7;
  border-bottom: 1px solid #ddd;
}

.calendar-header button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.calendar-body {
  display: flex;
}

.calendar {
  flex: 1;
  margin: 5px;
}

.week-days,
.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
}

.week-days span,
.days span {
  text-align: center;
  padding: 5px;
}

.days span {
  cursor: pointer;
}

.days span.selected {
  background-color: #b18f5f;
  color: #fff;
  border-radius: 50%;
}

.days span.today {
  border: 1px solid #b18f5f;
  border-radius: 50%;
}
</style>
